<template>
  <div class="complaint-add">
    <van-nav-bar class="header"
                 title="投诉建议"
                 left-arrow
                 @click-left="goBack()">
      <span slot="right"
            @click="submit">完成</span>
    </van-nav-bar>
    <div class="weaper">
      <van-cell-group class="fengniao-form form">
        <div class="form-items">
          <van-field v-model="form.description"
                     type="textarea"
                     placeholder="请输入你要投诉的内容"
                     rows="10"
                     autosize
                     class="form-item" />
        </div>
        <div class="form-items">
          <van-select-field center
                            class="form-item"
                            label="类型"
                            dic-name="suggest_type"
                            v-model="form.suggestType"
                            placeholder="请选择类型" />
          <van-field center
                     class="form-item"
                     label="联系人"
                     v-model="userInfo.ownName"
                     placeholder="请输入联系人"
                     disabled/>
          <van-field center
                     class="form-item"
                     label="手机"
                     v-model="userInfo.phone"
                     placeholder="请输入手机"
                     disabled/>
          <van-field center
                     class="form-item"
                     label="地址"
                     v-model="address"
                     placeholder="请输入地址"
                     disabled />
        </div>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { addObj } from '@/api/complaint';
import baseCommon from '@/mixins/common';
import { asyncValidator } from '@/util/validate';
import vanSelectField from '@/components/select/main';

export default {
  name: 'complaintAdd',
  mixins: [baseCommon()],
  components: {
    vanSelectField,
  },
  data () {
    return {
      rules: {
        description: { type: 'string', required: true, message: '请输入投诉内容' },
        suggestType: { type: 'string', required: true, message: '请输入投诉类型' },
      },
      form: {
        houseId: undefined,
        description: undefined,
        suggestType: undefined,
        unitId: undefined,
        buildingId: undefined,
        communityId: undefined,
        ownerId: undefined,
      },
    };
  },
  computed: {
    ...mapGetters(['userInfo', 'address']),
  },
  created () {
    this.init();
  },
  mounted () { },
  methods: {
    init () {
      this.form.houseId = this.userInfo.houseId;
      this.form.unitId = this.userInfo.unitId;
      this.form.buildingId = this.userInfo.buildingId;
      this.form.communityId = this.userInfo.communityId;
      this.form.ownerId = this.userInfo.ownerId;
    },
    submit () {
      asyncValidator(this.rules, this.form).then(() => addObj(this.form)).then((res) => {
        this.$message.success({
          message: '提交成功，感谢您的反馈',
          duration: 1500,
        });
        this.goBack();
      }).catch((errors) => {
        this.$message.warning({
          message: errors[0].message,
          duration: 1500,
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.complaint-add {
}
</style>

